<template>
	<div @scroll.passive="Scroll" style="height: 100vh;width: 100vw;overflow: auto;">
		<el-button @click="Switch('News')" type="primary">新闻</el-button>
		<el-button @click="Switch('Post')" type="info">博客</el-button>
		<component :is="ActiveComponent"></component>
		<demo :ActiveComponent.prop="ActiveComponent" @update:ActiveComponent="Switch"></demo>
		<hello-world></hello-world>
	</div>
</template>

<script>
	import HelloWorld from '@/components/helloworld';
	import News from '@/components/news';
	import Post from '@/components/post';
	import Demo from '@/components/demo';
	// import $ from "jquery";

	// console.log("========================" + Description + "=============================");
	export default {
		name: "app",
		components: { HelloWorld, News, Post, Demo },
		data(){
			return {
				ActiveComponent: "News"
			}
		},
		created(){
			console.log($);
		},
		mounted(){
			debugger;
			$("body").attr("style", "background: orange;");
		},
		methods: {
			Switch(type) {
				this.ActiveComponent = type;
			},
			Scroll(event){
				console.log(event.target);
			}
		}
	}
</script>

<style lang="css" scoped>
	div{
		font-size: 24px;
		color: red;
	}
</style>